{% extends 'base.html' %}
{% block 'body' %}

<form id="edit" method="POST" action="{{ request.uri }}" enctype="multipart/form-data" accept-charset="utf-8">
	{{ xsrf_form_html() }}
	<input type="hidden" name="_js_enabled" value="0">
	<input type="hidden" id="page_id" name="page_id" value="{{ contents.id }}">
	<input type="hidden" name="page_slug" value="{{ contents.slug }}">
	<div><input type="text" name="name" value="{{ contents.name }}"></div>
	<div><textarea name="raw">{{ contents.raw }}</textarea></div>
	<div><label><input type="checkbox" name="in_nav"{% if contents.in_nav %} checked{% end %}>Show in navigation</label></div>
	<input type="file" id="files" name="files" multiple>
	<span id="progress"></span>
	<div><button type="submit" id="save">Save</button></div>
</form>

<form id="uploads" method="POST" action="{{ reverse_url('delete_upload') }}">
	{{ xsrf_form_html() }}
	<input type="hidden" name="_js_enabled" value="0">
	<input type="hidden" name="page_slug" value="{{ contents.slug }}">
	{% for upload in uploads %}
	<div class="upload">
		{% module Upload(upload) %}
	</div>
	{% end %}
</form>

<a href="{{ reverse_url('page', contents.slug) }}">View</a>

<form id="remove" method="POST" action="{{ reverse_url('delete') }}">
	{{ xsrf_form_html() }}
	<input type="hidden" name="page_id" value="{{ contents.id }}">
	<button type="submit">Delete page</button>
</form>

<script>
$$('input[name="_js_enabled"]').set('value', 1);

var form = $('edit'),
	files_key = 'files',
	page = $('page_id'),
	progress = $('progress'),
	uploads_list = $('uploads');

var init_change = function() {
	$(files_key).addEvent('change', function(e) {
		e.preventDefault();
		form.addEvent('submit', prevent_submit);
		var files = this;
		on_select(this.files);
	});
}

var prevent_submit = function(e) {
	e.preventDefault();
}

var on_select = function(selected) {
	var data = new FormData(),
		request = new XMLHttpRequest();

	data.append('_xsrf', Cookie.read('_xsrf'));
	data.append('page_id', page.value);

	Object.each(selected, function(file) {
		data.append(files.name, file);
	});

	request.open('POST', '{{ reverse_url('upload') }}', true);

	request.onreadystatechange = function() {
		if (request.readyState == 4 && request.status == 200)
			handle_uploads(request.responseText);
	};

	request.upload.onprogress = function(e) {
		if (e.lengthComputable) {
			var percent = Math.round((e.loaded / e.total) * 100);
			progress.set('text', percent + '%');

			if (percent == 100)
				progress.innerText = 'Processing...';
		}
	};

	request.send(data);
}

var handle_uploads = function(file_list) {
	var uploads = JSON.decode(file_list);
	var new_input = files.clone();

	new_input.set('id', files_key);
	new_input.replaces(files);
	init_change();
	form.removeEvent('submit', prevent_submit);
	progress.set('text', 'Done');

	uploads.uploads.each(function(upload) {
		uploads_list.adopt(new Element('div', {html: upload}).getChildren());
	});
}

init_change();

var uploads = $('uploads');

var delete_request = new Request({
	onSuccess: function(upload_id) {
		console.log(upload_id);
		$('upload_' + upload_id.toInt()).dispose();
	}
});

uploads.addEvent('submit', function(e) {
	e.preventDefault();
});

uploads.addEvent('click:relay(button)', function(e, target) {
	e.preventDefault();
	delete_request.send({
		method: uploads.method,
		url: uploads.action,
		data: uploads.toQueryString() + '&upload_id=' + target.value.toInt()
	});
});
</script>
{% end %}